/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="sfx-steps__wrap" @click="_back">
        <slot></slot>
    </div>
</template>
<style lang="stylus">
.sfx-steps__wrap
    display flex
    .sfx-step-item
        .is-finish
            color #18c1c6
            .sfx-step__icon
                background #18c1c6
            .sfx-step-line__inner
                background #18c1c6
        .is-wait
            color #c0c4cc
            .sfx-step__icon
                background #c0c4cc
                color #fff
            .sfx-step-line__inner
                background #c0c4cc
        .is-process
            color #18c1c6
            .sfx-step__icon
                background #18c1c6
            .sfx-step-line__inner
                background #18c1c6
</style>
<script lang=ts>

    /**
     * Created by sch on 2018/9/10.
     */

    import { hasClass } from 'wind-dom';
    import { Component, Vue, Prop, Watch  } from 'vue-property-decorator';

    @Component
    export default class Step extends Vue{
        @Prop({
            type: Number,
            default: -1
        })  value!: number
        @Prop({
            type: Boolean,
            default: false
        })  alignCenter!: boolean
        @Prop({
            type: Boolean,
            default: true
        })  canBack!: boolean

        steps: SafeAny[] = [] // TODO: REMOVE ANY
        active: number = -1


        created () {
            this.active = this.value;
        }

        @Watch('value')
        valueChange (newVal: number, oldVal: number) {
            this.active = newVal;
            this.$emit('change', newVal, oldVal); // 监听value变化，派发当前状态
        }
        @Watch('steps')
        // TODO: REMOE ANY
        stepsChange (steps: SafeAny[]) {
            steps.forEach((child, index) => {
                child.index = index;
            });
        }

         _back ($event: MouseEvent) {
            let nowIndex = Number.parseInt(($event.target as HTMLDivElement)!.attributes[0].value, Number('10'));
            if ((this.active > nowIndex) && !hasClass($event.target, 'sfv-step__line') && this.canBack) {
                this.active = nowIndex;
                this.$emit('input', this.active);
            }
        }

        /**
         * 填充steps方法
         * @param {Ojbect} stepItem 子组件实例
         * @public
         */
        // TODO: REMOVE ANY
        setSteps (stepItem: SafeAny) {
            if (stepItem) {
                this.steps.push(stepItem);
            }
        }
    };
</script>
